<template>
    <button @click="getUserInfo()">获取用户信息</button>
    <span>{{ userInfo }}</span>

    <div class="container">
        <div id="login">
            <h2>欢 迎 回 来</h2>
            <el-form :model="loginInfo" status-icon :rules="rules" ref="loginInfo" label-width="100px"
                class="demo-ruleForm">

                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginInfo.username" placeholder="请输入用户名" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密  码" prop="password">
                    <el-input v-model="loginInfo.password" placeholder="请输入密码" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="age">
                    <el-input v-model.number="loginInfo.age" placeholder="请输入验证码"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button id="submitForm" type="primary" @click="submitForm()">提交</el-button>
                    <el-button id="resetForm" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

import { ElButton, ElInput } from 'element-plus'
import { ref } from 'vue'
import { login, getUserInfo } from '../../apis/user'
export default {
    components: { ElButton, ElInput },
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('验证码不能为空'));
            }
            callback();
        };
        var validateUsername = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入用户名'));
            } else {
                callback();
            }
        };
        var validatePassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            loginInfo: {
                username: '',
                password: '',
                age: ''
            },
            token: '',
            userInfo: '',
            rules: {
                username: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                age: [
                    { validator: checkAge, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        async submitForm() {
            try {
                console.log(this.loginInfo);
                let res = await login(this.loginInfo);
                console.log(res.code)
                if (res.code >= 0) {
                    //token保存到本地中
                    localStorage.setItem(res.data.tokenName, res.data.tokenValue)
                    this.$message({
                        message: '恭喜你，登录成功',
                        type: 'success'
                    });
                    //跳转页面
                } else {
                    this.$message({
                        showClose: true,
                        message: '登录失败：' + res.msg,
                        type: 'error'
                    });
                }
            } catch (error) {

            }
        },
        async getUserInfo() {
            let res = await getUserInfo(this.loginInfo);
            this.userInfo = res.data.nickname
        },
        resetForm(loginInfo) {
            this.$refs[loginInfo].resetFields();
        }
    }
}
</script>
<style scoped>
.container {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url("@/assets/oceanBackground.svg");
    background-attachment: fixed;
    background-size: cover;
}


#login {
    width: 500px;
    margin: 10px;
    padding: 5px;
    /* position: static; */
    position: relative;
    top: 100px;
    left: 50%;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-color: #61b7f9;
    border-radius: 30px;
}

el-button {
    margin: auto;
}

#formInput {

    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 20px;

}


h2 {
    text-align: center;
}
</style>
  